import React from 'react';
import {
  ListView,
  StyleSheet,
  Text,
  TouchableOpacity,
  Vibration
} from 'react-native';
import * as defaultStyles from '../constants/DefaultStyles';

const paramDic = {
  '1' : 'num',
  '2' : 'num',
  '3' : 'num',
  '4' : 'num',
  '5' : 'num',
  '6' : 'num',
  '7' : 'num',
  '8' : 'num',
  '9' : 'num',
  '0' : 'num',
  '00' : 'num',
  '.' : 'point',
  'DEL' : 'del',
  'C' : 'clear',
  '+' : 'add',
  '=' : '=',
};

//转换千分制
function toThousands(str){
  var newStr = "";
  var count = 0;

  if(str.indexOf(".")==-1){
    for(var i=str.length-1;i>=0;i--){
      if(count % 3 == 0 && count != 0){
        newStr = str.charAt(i) + "," + newStr;
      }else{
        newStr = str.charAt(i) + newStr;
      }
      count++;
    }
    console.log(newStr);
    return newStr;
  }
  else
  {
    let point = str.split('.')[1];
    for(var i = str.indexOf(".")-1;i>=0;i--){
      if(count % 3 == 0 && count != 0){
        newStr = str.charAt(i) + "," + newStr; //碰到3的倍数则加上“,”号
      }else{
        newStr = str.charAt(i) + newStr; //逐个字符相接起来
      }
      count++;
    }
    str = newStr + '.' + point;
    return str;
  }
}

function add(str1, str2) {
  let num1 = parseFloat(str1);
  let num2 = parseFloat(str2);
  let sum = num1 + num2;
  if (sum > 999999999) {
    return '999999999'
  }
  return sum.toString();
}


export default class Collection extends React.Component {
  constructor(props) {
    super(props);
    let ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: ds.cloneWithRows(props.data),
      result: '0.00',
      sum: '0.00',
      operator: 'none',
      clear: 'false',
    }
  }
  _renderRow (rowData, rowID) {
    let value = rowData[0];
    return (
      <TouchableOpacity style={styles.row} id={rowID}
                        onPress={() => {
                          Vibration.vibrate(100);
                          let value = rowData[0];
                          let type = paramDic[value];
                          let result = this.state.result;
                          if (type === 'num') {
                            if (this.state.clear === true) {
                              if (value === '00') {
                                  value = 0
                                }
                                result = value;
                              this.state.clear = false;
                            }
                            else {
                              if  (result.indexOf('.') < 0 && result.length > 8){
                                return;
                              }
                              if (result.replace(/./, '').length > 10) {
                                return;
                              }

                              if (result === '0.00' || result === '0') {
                                if (value === '00') {
                                  return;
                                }

                                result = value;
                              }
                              else {
                                if (result.length == 8 && value === '00') {
                                  value = '0';
                                }
                                else if (result.indexOf('.') >= 0) {
                                  if (result.split('.')[1].length > 1) {
                                    value = '';
                                  }
                                  else if (result.split('.')[1].length > 0 && value === '00') {
                                    value = '0'
                                  }
                                }
                                result = result + value;
                              }
                            }
                          }
                          else if (type === 'point') {
                            if (result.indexOf('.') > 0) {
                              return;
                            }
                            else {
                              if (result.length < 11) {
                                result = result + value;
                              }
                            }
                          }
                          else if (type === 'del' && result !== '0.00') {
                            result = result.substring(0, this.state.result.length - 1);
                            if  (result.length === 0) {
                              result = '0.00';
                            }
                          }

                          if (type === 'add' && result !== '0.00') {
                            if (this.state.operator !== 'none') {
                              result = add(this.state.sum, result);
                            }
                            this.state.operator = '+';
                            this.state.sum = result;
                            this.state.clear = true;
                          }
                          if (type === '=') {
                            if (this.state.clear) {
                              this.state.clear = false;
                            }
                            else {
                              if (this.state.operator === '+') {
                                result = add(this.state.sum, result);
                                this.state.operator = 'none';
                              }
                            }
                          }

                          if (type === 'clear') {
                            result = '0.00';
                            this.state.sum = '0.00';
                            this.state.operator = 'none';
                            this.state.clear = false;
                          }


                          let thousandsResult = toThousands(result);
                          this.state.result = result;
                          this.props.getResult(thousandsResult);
                        }
                        }>
        <Text style={{fontSize: rowData[0] === 'DEL' ? 25 : 28}}>{rowData[0]}</Text>
      </TouchableOpacity>
    );
  }
  render() {
    return ( 
      <ListView
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderRow={this._renderRow.bind(this)}
        style={{margin: 0}}
        initialListSize = {16}
        bounces={false}
        >
        </ListView>
    );
  }
}

const styles = StyleSheet.create({
  list: {
    marginTop: 10,
    marginBottom: 0,
    marginLeft: 15,
    marginRight: 15,
    flexDirection: 'row',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
    borderColor: 'black',
    height: (defaultStyles.SCREENHEIGHT - 49 - 64) / 9 * 5,
  },
  row: {
    justifyContent: 'center',
    padding: 0,
    margin: 10,
    width: 55,
    height: (defaultStyles.SCREENHEIGHT - 49 - 64) / 10,
    backgroundColor: '#F6F6F6',
    alignItems: 'center',
  }
});